<template>  
    <div>  
      <input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="输入待办事项" />  
      <button @click="addTodo">添加</button>  
      <ul>  
        <TodoItem  
          v-for="(todo, index) in todos"  
          :key="index"  
          :title="todo.title"  
          :completed="todo.completed"  
          @update:completed="updateTodoCompleted(index, $event)"  
          @remove-todo="removeTodo(index)"  
        />  
      </ul>  
    </div>  
  </template>  
    
  <script>  
  import TodoItem from './TodoItem.vue';  
    
  export default {  
    components: {  
      TodoItem  
    },  
    data() {  
      return {  
        todos: [],  
        newTodoTitle: ''  
      };  
    },  
    methods: {  
      addTodo() {  
        if (this.newTodoTitle) {  
          this.todos.push({ title: this.newTodoTitle, completed: false });  
          this.newTodoTitle = '';  
        }  
      },  
      removeTodo(index) {  
        this.todos.splice(index, 1);  
      },  
      updateTodoCompleted(index, completed) {  
        this.todos[index].completed = completed;  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  /* 这里可以添加TodoList的样式 */  
  </style>